import React from "react";
import './detail.css';
import qs from 'qs';
import { queryDetail } from '../../services/new';
import UcNavbar from '../../components/uc-navBar/uc-navBar'
import UcSkeleton from '../../components/uc-skeleton/uc-skeleton'
import xing from '../../assets/img/xing.png'
import history from '../../assets/img/history.png'
import { withRouter } from "react-router";

class Detail extends React.Component {
    state = {
        detail: {}
    };

    async componentDidMount() {
        let _id = this.props.location.pathname.substring(8);
        console.log(this.props.location.pathname.substring(8))
        let collectionName = qs.parse(this.props.location.search, { ignoreQueryPrefix: true }).collectionName;
        let { data: detail } = await queryDetail({ _id, collectionName });
        this.setState({ detail })
    }

    render() {
        if (this.state.detail.title) {
            var { title, time, detail: { auth, auth_icon, content } } = this.state.detail;
        }
        return (
            <UcSkeleton loading={!this.state.detail.title}>
                <div>
                    <UcNavbar
                        onLeftClick={() => this.props.history.go(-1)}
                        icon={<img alt="sdf" src={history} />}
                        mode="light"
                    />

                    <div className="content">

                        <div className="header clear"><h2><img src={auth_icon} alt="" /></h2><p>{auth}</p></div>
                        <div className="cont">
                            <h3>{title}</h3>
                            <div className="time"><p><span><img src={require('../../assets/img/zan.png').default} alt="22" /></span></p>
                            </div>
                            <div className="text-box" dangerouslySetInnerHTML={{ __html: content }}></div>
                        </div>

                    </div>

                    <div className="foot-btn">
                        <ul>
                            <li className="say"><a href="#">
                                <i></i><span>0</span>
                            </a></li>
                            <li className="zan"><a href="#" >
                                <i></i><span>0</span>
                            </a></li>
                            <li className="xing"><a href="#">
                                <i><img src={xing} alt="xx" /></i>
                            </a></li>
                            <li className="fx"><a href="#">
                                <i><img src={require('../../assets/img/fx.png').default} alt="xx" /></i>
                            </a></li>
                        </ul>
                    </div>


                </div>
            </UcSkeleton>
        )
    }


}
export default withRouter(Detail)
